// 第一步：最简单的Vue应用
import { createApp } from 'vue';

console.log('🚀 开始学习Vue.js第一步...');

// 1. 创建Vue应用实例
const app = createApp({
    // 2. 定义模板（HTML结构）
    template: `
        <div class="vue-demo" style="padding: 20px; background: #f0f8ff; border-radius: 8px; margin: 20px 0;">
            <h3>🎯 我的第一个Vue组件</h3>
            <p>消息：{{ message }}</p>
            <p>计数器：{{ count }}</p>
            <button @click="increment">点击增加</button>
        </div>
    `,
    
    // 3. 定义数据（响应式）
    data() {
        return {
            message: 'Hello Vue!',
            count: 0
        }
    },
    
    // 4. 定义方法
    methods: {
        increment() {
            this.count++;
            console.log('计数器增加到:', this.count);
        }
    },
    
    // 5. 生命周期钩子
    mounted() {
        console.log('✅ Vue组件加载完成！');
    }
});

// 6. 挂载到页面
app.mount('#vue-demo-container');